<template>
  <div>
    <el-menu mode="horizontal" :ellipsis="false">
      <h4>自定义系统名称</h4>
      <div class="flex-grow" />
      <el-sub-menu index="1">
        <template #title>{{ username }}</template>
        <el-menu-item index="1-1" @click="userlogout">退出登录</el-menu-item>
      </el-sub-menu>
    </el-menu>
    <el-container>
      <el-aside width="200px">
        <el-row>
          <el-col :span="24">
            <el-menu default-active="1">
              <router-link to="/HomePage">
                <el-menu-item index="1">
                  <span>首页</span>
                </el-menu-item>
              </router-link>
              <el-sub-menu index="2">
                <template #title> 项目管理 </template>
                <router-link to="/ProjectList">
                  <el-menu-item index="2-1">项目列表</el-menu-item>
                </router-link>
                <router-link to="/Modules">
                  <el-menu-item index="2-2">模块管理</el-menu-item>
                </router-link>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title> 测试管理 </template>
                <router-link to="/UrlList">
                  <el-menu-item index="3-1">接口列表</el-menu-item>
                </router-link>
              </el-sub-menu>
              <el-sub-menu index="4">
                <template #title> 测试执行 </template>
              </el-sub-menu>
              <el-sub-menu index="5">
                <template #title> 系统管理 </template>
                <router-link to="/GlobalVariable">
                  <el-menu-item index="5-1">全局变量</el-menu-item>
                </router-link>
              </el-sub-menu>
              <el-sub-menu index="6">
                <template #title> 系统工具 </template>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { useTodoStore } from "../store/user";
import { ElMessage } from "element-plus";
import { logout } from "@/api";
import { useRouter } from "vue-router";
// import ProjectList from './ProjectList.vue'
// import child1 from './child1.vue'
export default {
  // components: { ProjectList },
  name: "MainPage",
  setup() {
    let store = useTodoStore();
    console.log(store.name);
    let username = store.name;
    // const da =da
    // console.log(props)
    const router = useRouter();
    router.push({
      name: "HomePage",
    });
    function userlogout() {
      logout().then((res) => {
        if (res.data.code == 0) {
          window.localStorage.clear();
          router.push({
            name: "MyLogin",
          });
          ElMessage({
            message: res.data.msg,
            type: "success",
            duration: 1000,
          });
        } else {
          throw res.data.msg;
        }
      });
    }

    return {
      username,
      userlogout,
    };
  },
};
</script>

<style>
/* .menu{
    height: 800px;
    position: absolute;
    width: 250px; 
    border-style: solid;
    border-width:1px;
    border-color:#909399;
    border-radius: 5px;
    line-height: 90%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
} */
/* .menu-zi{
    position: absolute;
    width: 200px;
    height: 100%;
    padding: 0;
    margin: 0;
} */

/* .logout{
    position:fixed;
    right:20px;
} */
/* .el-header{
    border-bottom: solid 1px var(--el-menu-border-color);
} */
/* .el-menu--horizontal {
    border-bottom:none;
    background-color:transparent;
} */
.el-menu--popup {
  min-width: 120px;
}

/* .gezi {
    height: 900px;
    position: fixed;
    left: 0;
    width: 500px;
} */
.flex-grow {
  flex-grow: 1;
}
.router-link-active {
  text-decoration: none;
}
a {
  text-decoration: none;
}
</style>